<!--
	访问统计
	Created by Penglei on 2023/08/08
-->
<template>
  <div class="visits">
    <!-- 统计量 -->
    <div class="assy">
      <!-- <div class="assy-item">
        <span class="assy-item-title">今日访问次数</span>
        <span class="assy-item-num">{{ listData.todaySum }}</span>
      </div>
      <div class="assy-item">
        <span class="assy-item-title">累计访问次数</span>
        <span class="assy-item-num">{{ listData.accumulateSum }}</span>
      </div> -->
      <VisitsCount title="今日访问次数" :num="listData.todaySum" />
      <VisitsCount title="累计访问次数" :num="listData.accumulateSum" />
    </div>
    <!-- 使用排名 -->
    <div class="using-rankings">
      <div class="using-rankings-title">
        <div class="using-rankings-title-name">系统使用排名（TOP3）</div>
        <el-radio-group v-model="tabActive" @change="tabSort">
          <el-radio-button label="today">今日</el-radio-button>
          <el-radio-button label="month">本月</el-radio-button>
          <el-radio-button label="all">全部</el-radio-button>
        </el-radio-group>
      </div>
      <div id="echartsRef" ref="echartsRef" class="echats-box"></div>
    </div>
  </div>
</template>

<script setup name="AccessStatistics">
// 引入echats
import * as echarts from "echarts";
import {  onMounted } from "vue";
import VisitsCount from '@/components/VisitsCount';
const props = defineProps({
  listData: {
    required: true,
    type: Object,
    default: {},
  },
});
const { listData } = toRefs(props);
// 选择项
let tabActive = ref("month");
let todayxAxis = [];
let todayyAxis = [];
let monthxAxis = [];
let monthyAxis = [];
let totalxAxis = [];
let totalyAxis = [];
let dataAxis = [];
let data = [].reverse();


const tabSort = (val) => {
  tabActive = val;
  getVal(tabActive);
};

function getVal(val) {
  if (val == "today") {
    todayxAxis = listData.value.todayList.map((item) => item.todayVisitNum);
    todayyAxis = listData.value.todayList.map((item) => item.province);
    dataAxis = todayyAxis.reverse();
    data = todayxAxis.reverse();
    renderChart();
  }
  if (val == "month") {
    monthxAxis = listData.value.monthList.map((item) => item.monthVisitNum);
    monthyAxis = listData.value.monthList.map((item) => item.province);
    dataAxis = monthyAxis.reverse();
    data = monthxAxis.reverse()
    renderChart();
  }
  if (val == "all") {
    totalxAxis = listData.value.accumulateList.map(
      (item) => item.accumulateVisitNum
    );
    totalyAxis = listData.value.accumulateList.map((item) => item.province);
    dataAxis = totalyAxis.reverse();
    data = totalxAxis.reverse();
    renderChart();
  }
}

let myChart = null;
// 渲染图表
const renderChart = () => {
  if (!myChart) {
    myChart = echarts.init(document.getElementById("echartsRef"));
  }
  // 数据
  // 配置项
  const option = {
    title: {
      show: false,
    },
    xAxis: {
      type: "value",
      position: "top",
      // 不显示线条和刻度
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      data: dataAxis,
      // 不显示线条和刻度
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        inside: false,
        fontSize: 14,
        margin: 18,
        color: "#999999",
        // align: 'right',
      },
      splitLine: {
        show: false,
      },
    },
    grid: {
      show: false,
      left: "16%",
      right: "0",
      top: 0,
      bottom: 10,
    },
    tooltip: {
      show: true,
      formatter: "{b0}: {c0}",
    },
    series: [
      {
        type: "bar",
        barWidth: "10",
        showBackground: false,
        backgroundStyle: {
          borderRadius: [0, 5, 5, 0], //（顺时针左上，右上，右下，左下）
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
            { offset: 0, color: "#0775FE " },
            { offset: 1, color: "#46FFFF " },
          ]),
          barBorderRadius: [0, 5, 5, 0], //（顺时针左上，右上，右下，左下）
          // shadowColor: '#0775FE',
          // shadowBlur: 2,
        },
        data: data,
      },
    ],
  };
  // 渲染
  option && myChart.setOption(option);
};

// 今日访问量
watch(
  () => props.listData,
  () => {
    listData.value.todaySum = listData.value.todaySum
    listData.value.accumulateSum = listData.value.accumulateSum
  },
  { deep: true, immediate: true }
);

// 初始化加载
const init = () => {};

// 挂载完成
onMounted(() => {
  getVal(tabActive.value)
  renderChart();
});
</script>

<style lang="scss" scoped>
.assy {
  display: flex;
  justify-content: space-between;
  &-item {
    width: 190px;
    height: 65px;
    background-size: 100% 100%;
    background-image: url(/src/assets/images/anbao/bg_num.png);
    margin-bottom: 10px;
    margin-left: 20px;
    &:nth-child(2) {
      margin-right: 20px;
    }
    span {
      display: block;
      color: #46ffff;
    }
    &-title {
      padding: 6px 0 0 6px;
      color: #46ffff;
      font-size: 14px;
    }
    &-num {
      padding-left: 11px;
      font-size: 27px;
      letter-spacing: 12px;
    }
  }
}

.visits {
  padding: 20px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;

  // 统计量
  .visits-count-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .visits-count {
      margin-bottom: 20px;
      width: 187px;
    }
  }

  // 使用排名
  .using-rankings {
    &-title {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      height: 24px;
      line-height: 24px;

      &-name {
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
      }

      :deep(.el-radio-group) {
        width: auto;
        font-size: 12px;
        border-radius: 12px 12px 12px 12px;
        border: 1px solid rgba(70, 255, 255, 0.7);
        background: linear-gradient(
          135deg,
          #00032d 0%,
          #000c58 50%,
          #00032d 100%
        );

        .el-radio-button {
          .el-radio-button__inner {
            padding: 0 5px;
            background-color: transparent;
            border: none;
            margin-top: -4px;
            color: #46ffff;
          }
        }

        .el-radio-button.is-active {
          background: #46ffff;

          .el-radio-button__inner {
            color: #03007b;
          }
        }

        .el-radio-button:first-child {
          border-radius: 12px 0 0 12px;
        }

        .el-radio-button:last-child {
          border-radius: 0 12px 12px 0;
        }
      }
    }

    .echats-box {
      width: 100%;
      height: 130px;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }
}
</style>
